<template>
	<view class="mian">
		<uni-nav-bar left-icon="back" status-bar=true fixed=true color="#fff" left-text="返回" right-text="" background-color="#37c0b9"
		 title="注册" @clickLeft="toback"></uni-nav-bar>
		<view class="">
			<!-- <view class="main">
				<view class="top">		
					<view class="top-logo">
					<image src="" mode="widthFix"  ></image>				
					</view>
					<view class="top-text">
						文体APP
					</view>				
				</view> -->

		</view>
		<view class="middle">
			<view class="touxiang" @click="upload">
				<text v-if="imgArr == '' ">+</text>
				<image v-if="imgArr != ''" :src="imgArr" mode="widthFix"></image>
			</view>
			<view class="touxiang_text" v-if="imgArr == '' ">
				请上传头像
			</view>


			<view class="middle-first">
				<input v-model:value="name" placeholder="请输入昵称" id="phone" style="font-size: 34rpx;width: 100%;" placeholder-style="color:#aaa" />
				<image src="../../static/imgs/quxiao.png" mode="widthFix" v-if="isfocus" @input="Focus"></image>
			</view>
			<view class="middle-second">
				<input type="number" v-model:value="phone" placeholder="请输入手机号" id="phone" style="font-size: 34rpx;width: 100%; "  maxlength="11" placeholder-style="color:#aaa"/>
				<image src="../../static/imgs/quxiao.png" mode="widthFix" v-if="isfocus"></image>

			</view>
			<view class="middle-second">
				<input type="text" v-model:value="password" placeholder="请设置密码(不少于6位)" id="phone" password style="font-size: 34rpx; width: 100%;" placeholder-style="color:#aaa" />
				<image src="../../static/imgs/quxiao.png" mode="widthFix" v-if="isfocus"></image>

			</view>
			<view class="middle-second">
				<input type="text" v-model:value="passwordsecond" placeholder="请确认密码" id="phone" password style="font-size: 34rpx;width: 100%;"placeholder-style="color:#aaa"/>
				<image src="../../static/imgs/quxiao.png" mode="widthFix" v-if="isfocus"></image>

			</view>

			<view class="submit" @click="submit">
				立即注册
			</view>

		</view>
	</view>


	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import compressImage from '@/pages/utils/common.js';
	const device = uni.getSystemInfoSync();
	import api from '@/pages/utils/api.js';
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				isfocus: false,
				phone: "",
				password: "",
				passwordsecond: "",
				name: "",
				imgArr: ""
			}
		},
		methods: {
			toback: function() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			// 提交注册
			submit() {
				// if (this.imgArr == '') {
				// 	uni.showToast({
				// 		title: "请上传头像",
				// 		icon: "none"
				// 	});
				// 	return;
				// }
				if (this.name == '') {
					uni.showToast({
						title: "请设置昵称",
						icon: "none"
					});
					return;
				}

				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: "请输入正确手机号",
						icon: "none"
					});
					return;

				}
				if (this.password == '') {
					uni.showToast({
						title: "请设置密码",
						icon: "none"
					});
					return;

				}
				if(this.password.length<6){
					uni.showToast({
						title: "密码长度不少于6位",
						icon: "none"
					});
					return;
					
				}
				if (this.password != this.passwordsecond) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					});
					return;
				} else {
					uni.showLoading({
						title: '正在注册...'
					});
					api.registerAccount({
						username: this.name,
						mobile: this.phone,
						avatar: this.imgArr,
						password: this.password,
						repassword: this.passwordsecond
					}).then(res => {
						uni.showLoading({
						 title: '正在注册...'
						});
						if(res.code==1){
							 setTimeout(function() {
							  uni.hideLoading();
							  uni.navigateTo({
								url: "../login-app/login-app"
							  })
							 }, 2000);
						}else{
							 uni.hideLoading();
							 uni.showToast({
								title: res.msg,
								icon:"none" 
							 });
						};
					})
				}
			},
            //上传头像
			upload: function() {
				let vm = this;
				uni.chooseImage({
					count: 1,
					sourceType:['album'],
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: async (chooseImageRes) => {
						console.log(chooseImageRes)
						const tempFilePaths = chooseImageRes.tempFilePaths; 
						let tempPathList = [];						
						for (let i = 0; i < tempFilePaths.length; i++) {
							const path = tempFilePaths[i];						
							const src = await this.compressImageHandler(path)
							tempPathList.push(src);
						};
						tempPathList.forEach((val, ind) => {
							//压缩头像
							uni.compressImage({
							  src: tempPathList[ind],
							  quality: 10,
							  success: res => {
							    console.log(res.tempFilePath)
								uni.uploadFile({
									url: 'http://wt.wanpinhui.tech/api/uploader',
									filePath: res.tempFilePath,
									name: 'images',
									success: (uploadFileRes) => {
										const res = JSON.parse(uploadFileRes.data)
										console.log(res)
										if (res.code == 1) {
												   uni.getImageInfo({
												              src: res.data,
												              success: function (image) {
																  // image.rotate(90)
																   console.log(image.orientation)
												                  image.orientation="left"
												              }
												          });
											vm.imgArr = res.data;
										} else {
											uni.showToast({
												icon: 'none',
												title: '操作失败'
											})
										}
									}
								})
							  }
							})
						})
					}
				});
			},

			async compressImageHandler(src){
				const tempPath = await compressImage(src,device.platform);
				return tempPath
			},
			lookImg: function(val) {
				const urls = this.imgArr
				const current = val
				uni.previewImage({
					urls,
					current
				})
			}
		}
	}
</script>

<style scoped>
	.main {
		width: 150rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.top-logo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00a0ea;
		color: #fff;
	}

	.top-logo image {
		width: 100%;
	}

	.middle {
		width: 90%;
		margin: 0 auto;
		margin-top: 150rpx;

	}

	.touxiang {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		height: 150rpx;
		margin: 0 auto;
		border: 1px solid #e0e0e0;
		border-radius: 80rpx;
		font-size: 120rpx;
		font-weight: 100;
		color: #e0e0e0;
		overflow: hidden;
		margin-bottom: 30rpx;

	}

	.touxiang image {
		width: 100%;
	}

	.touxiang_text {
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 34rpx;
		color: #aaa;

	}

	.middle-first {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #e0e0e0;
		display: flex;
		justify-content: space-between;

	}

	.middle-first image {
		width: 70rpx;

	}

	.middle-second {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		border-bottom: 1px solid #e0e0e0;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.middle-second image {
		width: 70rpx;

	}

	#phone {
		padding-left: 20rpx;
		font-size: 38rpx;


	}

	.submit {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 110rpx;
		background-color: #37c0b9;
		color: #fff;
		margin-top: 100rpx;
		border-radius: 60rpx;
	}

	.tips {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		color: #c3c3c3;
	}
</style>
